import React, { useState, useEffect, useContext } from "react";
import { Range } from "rc-slider";
import { useStyles, COLOR } from "./styles";
import { ThemeContext } from "../theme";
import type { HotWarmColdValue } from "./type";
import type { CSSProperties } from "react";
import classNames from "classnames";

export default HotWarmCold;

interface HotWarmColdProps {
  value?: HotWarmColdValue;
  disabled?: boolean;
  style?: CSSProperties;
  className?: string;
  onChange?: (value: HotWarmColdValue) => void;
}

// 格式化数值，把数值对应到时间范围，注意！！数值来自与 Range 组件的 marks 参数
function format(n: number) {
  if (n <= 60) return n + "天";
  if (n <= 82) return n - 58 + "个月";
  return n - 80 + "年";
}

// 转换成天为单位，传入的 n 是 Range 组件返回的值
function toDay(n: number): number {
  if (n <= 60) return n;
  if (n <= 82) return (n - 58) * 30;
  return (n - 80) * 360;
}

// 转换成年月日为单位，传入的 n 是 initValue
function toDate(n: number): number {
  if (n <= 60) return n;
  if (n <= 720) return Math.floor(n / 30) + 58;
  return Math.floor(n / 360) + 80;
}

const Marks = { 0: "0天", 60: "60天", 82: "24个月", 95: "15年" };

const DotStyle = { borderColor: "none" };
const TrackStyle = [
  { backgroundColor: COLOR.yellow },
  { backgroundColor: COLOR.blue },
  { backgroundColor: COLOR.gray },
];
const HandleStyle = [
  { borderColor: COLOR.red },
  { borderColor: COLOR.yellow },
  { borderColor: COLOR.blue },
];
const RailStyle = { backgroundColor: COLOR.red };

/**
 * 接收到的 value 以天为单位
 * 显示时[0,60]单位为天，(60,82] 单位为月，(82,95] 单位为年，一个月按 30 天计算，一年按 365 天计算
 * onChange 返回的 value 以天为单位
 */
function HotWarmCold({
  value,
  disabled,
  style,
  className,
  onChange,
}: HotWarmColdProps) {
  const { fontSize } = useContext(ThemeContext);
  const classes = useStyles({ fontSize });

  const getPeriodFromValue = () => ({
    hot: toDate(value?.hot ?? 0),
    warm: toDate(value?.warm ?? 0),
    cold: toDate(value?.cold ?? 0),
  });

  const [period, setPeriod] = useState(getPeriodFromValue());

  useEffect(() => {
    setPeriod(getPeriodFromValue());
  }, [value]);

  const onChangeHandler = (v: Array<number>) => {
    setPeriod({ hot: v[0], warm: v[1], cold: v[2] });
    onChange?.({
      hot: toDay(v[0]),
      warm: toDay(v[1]),
      cold: toDay(v[2]),
    });
  };

  return (
    <div className={classes.period}>
      <div className={classNames(classes.tips, classes.tipsHot)}>
        热数据: 0 - {format(period.hot)}
      </div>

      <div className={classNames(classes.tips, classes.tipsWarm)}>
        温数据: {format(period.hot)} - {format(period.warm)}
      </div>

      <div className={classNames(classes.tips, classes.tipsCold)}>
        冷数据: {format(period.warm)} - {format(period.cold)}
      </div>
      <div className={classes.rangePanel}>
        <Range
          prefixCls="ct0-hotwarmcold"
          style={style}
          className={classNames(classes.range, className)}
          disabled={disabled}
          onChange={onChangeHandler}
          min={0}
          max={95}
          marks={Marks}
          count={3}
          value={[period.hot, period.warm, period.cold, 95]}
          defaultValue={[period.hot, period.warm, period.cold, 95]}
          pushable
          trackStyle={TrackStyle}
          dotStyle={DotStyle}
          handleStyle={HandleStyle}
          railStyle={RailStyle}
        />
      </div>
    </div>
  );
}
